<template>
  <view class="search">
    <view class="top">
      <u-search
        placeholder="请输入国内物流单号或尾程派送单号"
        v-model="keyword"
        actionText="查询"
        bgColor="#7b98ee"
        searchIconColor="#FFFFFF"
        :actionStyle="actionStyle"
        placeholderColor="#FFFFFF"
        @custom="custom"
      ></u-search>
      <!-- :inputStyle="inputStyle" -->
    </view>
    <!-- <view class="content">
      <view class="tips space-between">
        <view>查询历史</view>
        <view class="ticon">
          <u-icon name="trash" color="#999999" size="28"></u-icon>
        </view>
      </view>
      <view class="history">
        <view
          class="item"
          v-for="(item, index) in historyList"
          :key="index"
          @click="search(item)"
          >{{ item }}</view
        >
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 搜索关键词
      keyword: "",
      // 搜索右侧控件的样式
      actionStyle: {
        "font-size": "32rpx",
        "font-weight": "bold",
        color: "rgba(255, 255, 255)",
      },
      // 搜索历史记录列表
      historyList: [
		  // "CAAFT30428001", "CAAFT30428002"
		],
      // inputStyle: {
      //   "background-color": "rgba(255, 255, 255, 0.4)",
      // },
    };
  },

  onLoad() {},

  methods: {
    // 查询
    custom(e) {
      if (e) {
        this.$uniApi.to(`/pages/search/logisticsDetail?id=${e}`);
      } else {
        this.$u.toast("请输入要查询的国内物流单号或尾程派送单号");
      }
    },
    search(item) {
      this.keyword = item;
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
  background-color: #ffffff;
}

.search {
  .top {
    background-color: $uni-color-main;
    padding: 27rpx 24rpx 22rpx;
  }

  .content {
    font-size: $uni-text-size-title;
    font-weight: bold;
    padding: 0 24rpx;

    .tips {
      margin: 34rpx 0 24rpx;
    }

    .history {
      color: $uni-text-color-grey;
      display: flex;

      .item {
        padding: 15rpx 20rpx;
        border-radius: 30rpx;
        background-color: #e6e6e6;
        margin-right: 24rpx;
      }
    }
  }
}
</style>
